<template>
  <vptLine
    class="base-echart"
    autoRander
    :height="height"
    v-bind="chartProps"
    :yAxisFontSize="yAxisFontSize"
    :xAxisInterval="1"
    :xAxisFontSize="yAxisFontSize"
  ></vptLine>
</template>

<script setup>
import { onMounted, ref } from "vue";
import vptLine from "@/components/echarts/vpt-line/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
const props = defineProps({
  chartData: { type: Array, default: () => [] },
  isLandscape: { type: Boolean, default: false },
  height: {
    type: String,
    default: "2rem",
  },
  yAxisFontSize: {
    type: Number,
    default: null,
  },
});

const chartProps = ref({
  chartTitle: "",
  grid: {
    top: fontSize(20),
    bottom: 10,
  },
  legendProps: {
    show: false,
    top: fontSize(32),
  },
  lengendData: ["测试"],
  chartData: [],
  splitNumber: 2,
  xAxisData: [],
  showAxisLabel: false,
  dataZoom: {
    show: true,
    endValue:5
  },
});

onMounted(() => {
  if (props.isLandscape) {
    chartProps.value = { ...chartProps.value, yAxisFontSize: 12 };
  }
  if (props.chartData.length) {
    chartProps.value.chartData = [
      props.chartData.map((item) => item.res_statuscode),
    ];
    chartProps.value.xAxisData = props.chartData.map((item) => item.data_time);
  }
});
</script>
